<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能大屏数据中心</title>
    <!-- 引入 ECharts CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #0f1c3f;
            color: #fff;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .dashboard {
            width: 100%;
            max-width: 1920px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 20px;
        }
        .card {
            background: linear-gradient(135deg, #0a214f, #153b7a);
            border: 1px solid #2a6ed8;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(42, 110, 216, 0.5);
            padding: 15px;
            position: relative;
            overflow: hidden;
        }
        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #2a6ed8, transparent);
            animation: shine 3s infinite linear;
        }
        @keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .card-title {
            font-size: 16px;
            color: #b0d0ff;
            margin-bottom: 10px;
            border-left: 3px solid #2a6ed8;
            padding-left: 8px;
        }
        .data-card {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .data-number {
            font-size: 24px;
            font-weight: bold;
            color: #66ccff;
            margin-bottom: 5px;
        }
        .data-desc {
            font-size: 12px;
            color: #99ccff;
        }
        .table-card table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .table-card th, .table-card td {
            border: 1px solid #2a6ed8;
            padding: 8px;
            text-align: center;
        }
        .table-card th {
            background-color: #153b7a;
            color: #b0d0ff;
        }
        .table-card td {
            color: #99ccff;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- 数据卡片区域 -->
        <div class="card data-card" id="card1">
            <div class="card-title">这里是标题1</div>
            <div class="data-number">6890.69</div>
            <div class="data-desc">小标题：文字 小标题：文字</div>
        </div>
        <div class="card data-card" id="card2">
            <div class="card-title">这里是标题2</div>
            <div class="data-number">6090.99</div>
            <div class="data-desc">小标题：文字 小标题：文字</div>
        </div>
        <div class="card data-card" id="card3">
            <div class="card-title">这里是标题3</div>
            <div class="data-number">2890.39</div>
            <div class="data-desc">小标题：文字 小标题：文字</div>
        </div>
        <div class="card data-card" id="card4">
            <div class="card-title">这里是标题4</div>
            <div class="data-number">7590.15</div>
            <div class="data-desc">小标题：文字 小标题：文字</div>
        </div>

        <!-- 饼图区域 -->
        <div class="card" id="pie-chart">
            <div class="card-title">这里是标题</div>
            <div style="width: 100%; height: 200px;"></div>
        </div>

        <!-- 柱状图区域 -->
        <div class="card" id="bar-chart" style="grid-column: span 2;">
            <div class="card-title">这里是标题</div>
            <div style="width: 100%; height: 200px;"></div>
        </div>

        <!-- 进度条区域 -->
        <div class="card" id="progress-chart" style="grid-column: span 2;">
            <div class="card-title">这里是标题</div>
            <div style="width: 100%; height: 200px;"></div>
        </div>

        <!-- 折线图区域 -->
        <div class="card" id="line-chart" style="grid-column: span 2;">
            <div class="card-title">这里是标题</div>
            <div style="width: 100%; height: 200px;"></div>
        </div>

        <!-- 数据统计区域 -->
        <div class="card" id="stat-card" style="grid-column: span 3;">
            <div class="card-title">这里是标题</div>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
                <div class="data-card">
                    <div class="data-number">23</div>
                    <div class="data-desc">今日收益比例</div>
                </div>
                <div class="data-card">
                    <div class="data-number">107</div>
                    <div class="data-desc">本月收益比例</div>
                </div>
                <div class="data-card">
                    <div class="data-number">107</div>
                    <div class="data-desc">历史收益比例</div>
                </div>
                <div class="data-card">
                    <div class="data-number">23</div>
                    <div class="data-desc">今日支出比例</div>
                </div>
                <div class="data-card">
                    <div class="data-number">23</div>
                    <div class="data-desc">本月支出比例</div>
                </div>
                <div class="data-card">
                    <div class="data-number">23</div>
                    <div class="data-desc">历史支出比例</div>
                </div>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="card table-card" id="data-table">
            <div class="card-title">这里是标题</div>
            <table>
                <thead>
                    <tr>
                        <th>用户</th>
                        <th>类型号</th>
                        <th>类别一</th>
                        <th>类别二</th>
                        <th>类别三</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>15</td>
                        <td>类别一</td>
                        <td>类别二</td>
                        <td>类别三</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>16</td>
                        <td>类别一</td>
                        <td>类别二</td>
                        <td>类别三</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>11</td>
                        <td>类别一</td>
                        <td>类别二</td>
                        <td>类别三</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>12</td>
                        <td>类别一</td>
                        <td>类别二</td>
                        <td>类别三</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>13</td>
                        <td>类别一</td>
                        <td>类别二</td>
                        <td>类别三</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // 初始化饼图
        const pieDom = document.querySelector('#pie-chart > div');
        const pieChart = echarts.init(pieDom);
        pieChart.setOption({
            color: ['#66ccff', '#ff99cc', '#ccff99', '#ffff99', '#99ccff'],
            series: [{
                type: 'pie',
                radius: '60%',
                data: [
                    { name: '西区', value: 30 },
                    { name: '南区', value: 20 },
                    { name: '北区', value: 25 },
                    { name: '东区', value: 15 },
                    { name: '中区', value: 10 }
                ],
                label: {
                    show: true,
                    color: '#fff'
                },
                labelLine: {
                    show: true,
                    color: '#b0d0ff'
                }
            }]
        });

        // 初始化柱状图
        const barDom = document.querySelector('#bar-chart > div');
        const barChart = echarts.init(barDom);
        barChart.setOption({
            color: ['#66ccff'],
            xAxis: {
                type: 'category',
                data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'],
                axisLine: {
                    lineStyle: { color: '#b0d0ff' }
                },
                axisLabel: { color: '#99ccff' }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: { color: '#b0d0ff' }
                },
                axisLabel: { color: '#99ccff' },
                splitLine: {
                    lineStyle: { color: 'rgba(42, 110, 216, 0.3)' }
                }
            },
            series: [{
                data: [200, 150, 200, 200, 250, 300, 350, 100, 400, 350, 100, 150, 100, 200, 200],
                type: 'bar',
                itemStyle: {
                    emphasis: {
                        color: '#2a6ed8'
                    }
                }
            }]
        });

        // 初始化进度条（堆叠条形图模拟）
        const progressDom = document.querySelector('#progress-chart > div');
        const progressChart = echarts.init(progressDom);
        progressChart.setOption({
            color: ['#ff99cc', '#ffff99', '#ffcc99', '#99ccff', '#cc99ff'],
            xAxis: {
                type: 'category',
                data: ['第一名', '第二名', '第三名', '第四名', '第五名'],
                axisLine: {
                    lineStyle: { color: '#b0d0ff' }
                },
                axisLabel: { color: '#99ccff' }
            },
            yAxis: {
                type: 'value',
                max: 100,
                axisLine: {
                    lineStyle: { color: '#b0d0ff' }
                },
                axisLabel: { color: '#99ccff' },
                splitLine: {
                    lineStyle: { color: 'rgba(42, 110, 216, 0.3)' }
                }
            },
            series: [
                {
                    data: [98.5, 88.5, 68.5, 40.5, 22.5],
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        emphasis: {
                            color: function(params) {
                                return params.color;
                            }
                        }
                    }
                },
                {
                    data: [2.5, 11.5, 31.5, 59.5, 77.5],
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        color: 'rgba(0,0,0,0)'
                    }
                }
            ]
        });

        // 初始化折线图
        const lineDom = document.querySelector('#line-chart > div');
        const lineChart = echarts.init(lineDom);
        lineChart.setOption({
            color: ['#66ccff', '#ff9966'],
            xAxis: {
                type: 'category',
                data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
                axisLine: {
                    lineStyle: { color: '#b0d0ff' }
                },
                axisLabel: { color: '#99ccff' }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: { color: '#b0d0ff' }
                },
                axisLabel: { color: '#99ccff' },
                splitLine: {
                    lineStyle: { color: 'rgba(42, 110, 216, 0.3)' }
                }
            },
            series: [
                {
                    name: '折线一',
                    data: [300, 200, 250, 200, 400, 300, 350],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        emphasis: {
                            color: '#66ccff'
                        }
                    }
                },
                {
                    name: '折线二',
                    data: [400, 300, 350, 300, 600, 500, 450],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        emphasis: {
                            color: '#ff9966'
                        }
                    }
                }
            ]
        });

        // 窗口 resize 时，图表自适应
        window.addEventListener('resize', function() {
            pieChart.resize();
            barChart.resize();
            progressChart.resize();
            lineChart.resize();
        });
    </script>
</body>
</html>